<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>日期计算器</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        body
        {
            font-family: "Helvetica Neue", Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
            margin:0;
            padding:20px;
            background:#f5f7fa;
            color:#333;
        }

        h1
        { text-align:center; color:#0066cc; margin-bottom:30px; }
        .card
        {
            max-width:700px;
            margin:0 auto 25px;
            background:#fff;
            border-radius:8px;
            box-shadow:0 2px 8px rgba(0,0,0,.05);
            padding:20px 25px;
        }
        .card h2{ margin-top:0; font-size:20px; color:#0066cc; }
        label{ display:block; margin:8px 0 4px; font-weight:bold; }
        input[type=date], input[type=number]
        {
            width:100%;
            padding:8px 10px;
            border:1px solid #ccc;
            border-radius:4px;
            font-size:16px;
        }
        button
        {
            margin-top:12px;
            padding:8px 20px;
            background:#0066cc;
            color:#fff;
            border:none;
            border-radius:4px;
            cursor:pointer;
            font-size:15px;
        }
        button:hover{ background:#0055b3; }
        .result{ margin-top:12px; font-size:16px; color:#006600; }
        @media(max-width:500px)
        {
            body{padding:10px}
            h1{font-size:24px}
            .card{padding:15px}
        }
    </style>
</head>
<body>

<h1>日期计算器</h1>

<!-- 今日日期 -->
<div class="card">
    <h2>今日日期</h2>
    <p id="today"></p>
</div>

<!-- 1. 日期间隔 -->
<div class="card">
    <h2>计算两个日期相差多少天</h2>
    <label>开始日期：</label>
    <input type="date" id="startDate">
    <label>结束日期：</label>
    <input type="date" id="endDate">
    <button onclick="calcDiff()">计算间隔</button>
    <div class="result" id="diffResult"></div>
</div>

<!-- 2. 日期加减 -->
<div class="card">
    <h2>日期加减天数</h2>
    <label>基准日期：</label>
    <input type="date" id="baseDate">
    <label>加减天数（负值为减）：</label>
    <input type="number" id="addDays" value="0">
    <button onclick="calcAdd()">计算结果</button>
    <div class="result" id="addResult"></div>
</div>

<!-- 3. 星期查询 -->
<div class="card">
    <h2>查询某天是星期几</h2>
    <label>日期：</label>
    <input type="date" id="weekDate">
    <button onclick="calcWeek()">查询星期</button>
    <div class="result" id="weekResult"></div>
</div>

<!-- 4. 倒计时 -->
<div class="card">
    <h2>距离某天还剩多少天</h2>
    <label>目标日期：</label>
    <input type="date" id="targetDate">
    <button onclick="calcCountdown()">计算倒计时</button>
    <div class="result" id="countdownResult"></div>
</div>

<script>
    // 工具：格式化日期 yyyy-mm-dd
    function fmt(d){
        return d.toISOString().split('T')[0];
    }

    // 初始化今日
    const now = new Date();
    document.getElementById('today').textContent = now.toLocaleDateString('zh-CN', {
        year:'numeric', month:'long', day:'numeric', weekday:'long'
    });

    // 1. 日期间隔
    function calcDiff(){
        const d1 = new Date(document.getElementById('startDate').value);
        const d2 = new Date(document.getElementById('endDate').value);
        if(isNaN(d1) || isNaN(d2)) return alert('请选择完整日期');
        const diff = Math.round((d2 - d1) / 864e5);
        document.getElementById('diffResult').textContent = `相差 ${diff} 天`;
    }

    // 2. 日期加减
    function calcAdd(){
        const base = new Date(document.getElementById('baseDate').value);
        const days = parseInt(document.getElementById('addDays').value, 10);
        if(isNaN(base) || isNaN(days)) return alert('请填写完整');
        const result = new Date(base);
        result.setDate(result.getDate() + days);
        document.getElementById('addResult').textContent = `结果日期：${fmt(result)}`;
    }

    // 3. 星期查询
    function calcWeek(){
        const d = new Date(document.getElementById('weekDate').value);
        if(isNaN(d)) return alert('请选择日期');
        const week = ['星期日','星期一','星期二','星期三','星期四','星期五','星期六'][d.getDay()];
        document.getElementById('weekResult').textContent = `${fmt(d)} 是 ${week}`;
    }

    // 4. 倒计时
    function calcCountdown(){
        const target = new Date(document.getElementById('targetDate').value);
        if(isNaN(target)) return alert('请选择日期');
        const diff = Math.ceil((target - now) / 864e5);
        if(diff < 0){
            document.getElementById('countdownResult').textContent = '目标日期已过去';
        }else{
            document.getElementById('countdownResult').textContent = `还剩 ${diff} 天`;
        }
    }

    // 默认把四个日期输入框设为今天
    [ 'startDate','endDate','baseDate','weekDate','targetDate' ].forEach(id=>{
        document.getElementById(id).value = fmt(now);
    });
</script>

</body>
</html>